<template>
  <div id="debtorShop">
    <c-title :hide="false" text="债务人店铺"></c-title>
    <div class="topHead">
      <div class="userbox">
        <div class="img">
          <img :src="userInfo.avatar" alt="" />
        </div>
        <div class="userboxRight">
          <div class="userboxRight_left">
            <div class="user">{{ userInfo.name }}</div>
          </div>
          <div class="userboxRight_right" @click="shopShowTap" v-if="jurisdiction">
            店铺切换
          </div>
        </div>
      </div>
      <div class="navBox">
        <div class="navSearch" @click="toSearch">
          <i class="iconfont icon-all_search_2"></i>
          搜索
        </div>
        <div class="navSelect">
          <div :class="navInd == 0 ? 'home' : 'classView'" @click="tapNav(0)">
            首页
            <div class="line" v-if="navInd == 0"></div>
          </div>
          <div
            :class="navInd == 1 ? 'home' : 'classView'"
            @click="tapNav(1)"
            class="classViewM"
          >
            分类
            <div class="line" v-if="navInd == 1"></div>
          </div>
          <div
            :class="navInd == 2 ? 'home' : 'classView'"
            v-if="kid && member_type == 1"
            @click="tapNav(2)"
          >
            我的
            <div class="line" v-if="navInd == 2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="noneIcon" v-if="!jurisdiction">
      <img src="../../../assets/images/debt/isnone.png" alt="" />
      <div>暂无权限查看~</div>
    </div>
    <template v-if="navInd == 0 && jurisdiction">
      <div class="navTab">
        <van-swipe class="my-swipe" indicator-color="white" :loop="false">
          <van-swipe-item v-if="ClassTypeInfo">
            <div class="navTabView_box">
              <div
                class="navTabView"
                v-for="(item, index) in ClassTypeInfo"
                :key="index"
                @click="toClassSearch(item)"
              >
                <div class="img">
                  <img :src="item.thumb_url" alt="" />
                </div>
                <div class="txt">{{ item.name }}</div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item v-if="navArr.length > 0">
            <div class="navTabView_box">
              <div
                class="navTabView"
                v-for="(item, index) in navArr"
                :key="index"
                @click="toClassSearch(item)"
              >
                <div class="img">
                  <img :src="item.thumb_url" alt="" />
                </div>
                <div class="txt">{{ item.name }}</div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <c-sort :supplier="true" v-on:sortIn="sortOut"></c-sort>
      <div class="goodsList">
        <goodslis
          :arr="goods"
          :showMask="false"
          :debtId="userInfo.debtor_id"
        ></goodslis>
      </div>
    </template>
    <classify v-show="navInd == 1 && jurisdiction" :debtId="userInfo.debtor_id"></classify>
    <template v-if="navInd == 2 && jurisdiction">
      <div class="myBox">
        <div class="topOne">
          <div>总提货券</div>
          <div v-if="ThrMemberArr">
            ￥{{ (Number(ThrMemberArr.common_credit) + Number(ThrMemberArr.frozen_credit)).toFixed(2) }}
          </div>
        </div>
        <div class="topTwo">
          <div class="topTwo_left">
            <div class="topTwo_left_price">
              ￥{{ ThrMemberArr.common_credit }}
            </div>
            <div class="topTwo_left_Txt">{{plugin_setting?plugin_setting.common_credit_name:'消费账户'}}</div>
          </div>
          <div class="topTwo_left">
            <div class="topTwo_left_price">
              ￥{{ ThrMemberArr.frozen_credit }}
            </div>
            <div class="topTwo_left_Txt">{{plugin_setting?plugin_setting.frozen_credit_name:'锁定账户'}}</div>
          </div>
        </div>
        <div class="topThr"></div>
        <div class="top_for">
          <div class="top_for_lis" @click="toVIP">
            <i class="iconfont icon-fontclass-huiyuantongbu"></i>
            <div class="txt">VIP</div>
          </div>
          <div class="top_for_lis" @click="toMyorder">
            <i class="iconfont icon-fontclass-wenzhang"></i>
            <div class="txt">我的订单</div>
          </div>
          <div class="top_for_lis" @click="toDetail">
            <i class="iconfont icon-fontclass-wenzhangzhongxin"></i>
            <div class="txt">提货券明细</div>
          </div>
        </div>
      </div>
    </template>
    <van-popup
      v-model="shopShow"
      position="bottom"
      :style="{ maxHeight: '79vh' }"
      closeable
    >
      <div class="maxShopListBox">
        <div class="shopShowTxt">切换店铺</div>
        <div class="btnlis">
          <div class="left">
            <div class="leftTxt">进入主商城</div>
          </div>
          <div class="right" @click="goSwitchShopHome">进店</div>
        </div>
        <div
          class="btnlis_li"
          v-for="(item, index) in shopListMember"
          :key="index"
        >
          <template v-if="kid">
          <div class="contenlis_top">
            <div class="contenlis_topLeft" v-if="item.has_one_debtor_member">
              <div class="img">
                <img :src="item.has_one_debtor_member.avatar" alt="" />
              </div>
              <div class="user">
                <div class="nameTxt">
                  {{ item.has_one_debtor.name }}
                </div>
                <div class="time">化债期：{{ item.end_time_str }}</div>
              </div>
              <div class="shopBtn" @click="goSwitchShop(item)">进店</div>
            </div>
          </div>
          <div class="contenlis_lis">
            <div class="contenlis_lisline">
              <div>总提货券:</div>
              <div class="contenlis_lisline_Price">
                ￥{{ item.sum_credit }}
              </div>
            </div>
            <div class="contenlis_lisline">
              <div>{{plugin_setting?plugin_setting.common_credit_name:'消费账户'}}:</div>
              <div class="contenlis_lisline_Price">
                ￥{{ item.common_credit }}
              </div>
            </div>
            <div class="contenlis_lisline">
              <div>{{plugin_setting?plugin_setting.frozen_credit_name:'锁定账户'}}:</div>
              <div class="contenlis_lisline_Price">
                ￥{{ item.frozen_credit }}
              </div>
            </div>
            <div class="contenlis_lisline">
              <div>订单数：</div>
              <div class="contenlis_lisline_Price">
                {{ item.has_many_order_count }}
              </div>
            </div>
          </div>
          </template>
        </div>
        <div
          v-if="shopListMemberLoadMore && kid"
          @click="getSwitchoverList"
          style="text-align: center; color: #999; padding-bottom: 1rem;"
        >
          加载更多
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import cSort from "components/sort";
import classify from "../components/classify";
import goodslis from "../components/goodsList";
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      navInd: 0,
      navArr: [],
      shopShow: false,
      noneShow: false,
      classInfoOne: [],
      userInfo: [],
      ClassTypeInfo: [],
      kid: null,
      order_field: "",
      order_by: "",
      goods: [],
      shopListMember: [],
      shopListMemberLoadMore: false,
      shopListPgae: 1,
      // 1债权人 2债务人 3VIP
      member_type: 2,
      ThrMemberArr:[],
      // 是否有权限观看
      jurisdiction:false,

      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
      plugin_setting:{}
    };
  },
  activated() {
    console.log(this.$route.params)
    if (this.$route.params && this.$route.params.kid) {
      this.kid = this.$route.params.kid;
    }
    // if(this.$route.params && this.$route.params.member_type){
    //   this.member_type = this.$route.params.member_type
    // }
    this.shopShow = false;
    this.getUser();
    this.getClassType();
    this.getShop();
    if(this.navInd == 2){
      this.getThrMember();
    }
  },
  methods: {
    toVIP() {
      this.$router.push(
        this.fun.getUrl("vipAdd", {
          debtId: this.userInfo.debtor_id,
        })
      );
    },
    toMyorder() {
      this.$router.push(
        this.fun.getUrl("debtOrder", {
          status: 0,
          member_type: 1,
          debtId: this.userInfo.debtor_id,
        })
      );
    },
    toDetail() {
      this.$router.push(
        this.fun.getUrl("purchaseDetails", {
          coupon: true,
          debtId: this.userInfo.debtor_id,
        })
      );
    },
    shopShowTap() {
      this.shopShow = true;
      // 初始化
      this.SwitchoverListInit();
      this.getSwitchoverList();
    },
    getSwitchoverList() {
      $http
        .get(
          "plugin.debt-shop.frontend.owner.debtorList",
          { is_use: 1, page: this.shopListPgae },
          "加载中"
        )
        .then((res) => {
          if (res.result === 1) {
            if (res.data.current_page < res.data.last_page) {
              this.shopListMemberLoadMore = true;
            } else if (res.data.current_page >= res.data.last_page) {
              this.shopListMemberLoadMore = false;
            }
            if (this.shopListMemberLoadMore) {
              this.shopListMember = this.shopListMember.concat(res.data.data);
            } else {
              this.shopListMember = res.data.data;
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    SwitchoverListInit() {
      this.shopListPgae = 1;
      this.shopListMemberLoadMore = false;
      this.shopListMember = [];
    },
    goSwitchShop(item) {
      this.$router.push(
        this.fun.getUrl("debtorShop", {
          kid: item.debtor_id,
          member_type: 1,
        })
      );
    },
    goSwitchShopHome() {
      this.$router.push(this.fun.getUrl("home", {}));
    },
    toSearch() {
      if(!this.jurisdiction) return
      this.$router.push(
        this.fun.getUrl("debtSearch", {
          debtSearch: false,
          debtId: this.userInfo.debtor_id,
        })
      );
    },
    toClassSearch(item) {
      let id = item.id;
      if (id == 0 && item.name == "全部分类") {
        // this.$router.push(
        //   this.fun.getUrl("debtSearch", {
        //     debtSearch: false,
        //     debtId: this.userInfo.debtor_id,
        //   })
        // );
        this.navInd = 1;
        return;
      }
      this.$router.push(
        this.fun.getUrl("debtSearch", {
          debtSearch: true,
          debtId: this.userInfo.debtor_id,
          debtCId: id,
        })
      );
    },
    getUser() {
      let json = {};
      if(this.$route.params.debtUid){
        json = { debtor_uid : this.$route.params.debtUid}
      }else{
        json = { debtor_id: this.kid ? this.kid : "" }
      }
      $http
        .get(
          "plugin.debt-shop.frontend.debt-member.getDebtor",
          json,
          "加载中"
        )
        .then((res) => {
          if (res.result === 1) {
            this.userInfo = res.data;
            this.member_type = res.data.member_type;
            this.plugin_setting = JSON.parse(localStorage.getItem("plugin_setting")).debt_shop;
            this.jurisdiction = true;
          } else {
            this.jurisdiction = false;
            Toast(res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getClassType() {
      $http
        .get("plugin.debt-shop.frontend.goods.recommendCategory", {}, "加载中")
        .then((res) => {
          if (res.result === 1) {
            if (res.data.length <= 9) {
              res.data.push({
                id: 0,
                thumb_url:
                  "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/debt/allClass.png",
                name: "全部分类",
              });
            } else if (res.data.length >= 10) {
              let ajson = {
                id: 0,
                thumb_url:
                  "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/debt/allClass.png",
                name: "全部分类",
              };
              res.data.push(ajson);
              this.ClassTypeInfo = res.data.slice(0, 10);
              this.navArr = res.data.slice(10);
              return;
            } else if (res.data.length == 19) {
              let ajson = {
                id: 0,
                thumb_url:
                  "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/debt/allClass.png",
                name: "全部分类",
              };
              res.data.push(ajson);
              this.ClassTypeInfo = res.data.slice(0, 10);
              this.navArr = res.data.slice(10);
              return;
            }
            this.ClassTypeInfo = res.data;
            this.navArr = [];
          } else {
            Toast(res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShop() {
      let json = {
        "search[keyword]": this.inputs,
        page: this.page,
        order_field: this.order_field,
        order_by: this.order_by,
        "search[plugin_id]": [-1,44,92],
      };
      let _url = "goods.goods.search-goods";
      $http.post(_url, json, "...").then((res) => {
        this.isShow = true;
        this.isLoading = false;
        if (res.result == 1) {
          this.isLoadMore = true;
          this.total_page = res.data.last_page;
          if (!this.total_page) {
            this.total_page = 0;
          }
          this.goods = res.data.data;
        } else {
          this.goods = [];
          this.isLoadMore = false;
          this.isShow = true;
        }
      });
    },
    getMoreData() {
      var that = this;
      if (this.navInd != 0) {
        return;
      }
      that.isLoadMore = false; // 防止多次请求分页数据
      let json = {
        "search[keyword]": this.inputs,
        page: this.page,
        order_field: this.order_field,
        order_by: this.order_by,
        "search[plugin_id]": [-1,44,92],
      };
      if (this.page >= this.total_page) {
        that.isLoadMore = false;
        return;
      } else {
        this.page = this.page + 1;
        json.page = this.page;
        $http.post("goods.goods.search-goods", json, "加载中").then(
          (response) => {
            that.isLoadMore = true;
            this.loading = false;
            if (response.result === 1) {
              var myData = response.data.data;
              that.goods = that.goods.concat(myData); //数组拼接
            } else {
              that.page = that.page - 1;
              this.loading = true;
              that.isLoadMore = false;
              return;
            }
          },
          function (response) {
            // error callback
          }
        );
      }
    },
    tapNav(key) {
      this.navInd = key;
      if(key == 2){
        this.getThrMember();
      }
    },
    init() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      this.goods = [];
    },
    getThrMember() {
      let json ={
        member_type: 1,
      }
      if(this.userInfo.debtor_id){
        json.debtor_id = this.userInfo.debtor_id
      }
      let _url = "plugin.debt-shop.frontend.debt-member.getDebtData";
      $http.get(_url, json, "...").then((res) => {
        if (res.result == 1) {
          this.ThrMemberArr = res.data;
        } else {
          Toast(res.msg);
        }
      });
    },
    sortOut(e) {
      this.init();
      this.order_field = e.order_field;
      this.order_by = e.order_by;
      console.log(this.order_by, this.order_field);
      this.getShop();
    },
  },
  components: {
    cSort,
    classify,
    goodslis,
  },
};
</script>
<style lang="scss" scoped>
.goodsList {
  padding: 0 0.625rem;
  background-color: #f6f6f6;
}

.noneIcon {
  margin-top: 3.09rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 0.75rem;
  color: #9c9c9c;

  img {
    width: 8.63rem;
    height: 7.69rem;
  }
}

.myBox {
  background: #fff;
  padding: 0 0.94rem;

  .topOne {
    height: 2.78rem;
    border-bottom: 1.0016px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.94rem;
  }

  .topTwo {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topTwo_left {
      flex: 1;

      .topTwo_left_price {
        font-size: 1rem;
      }

      .topTwo_left_Txt {
        font-size: 0.75rem;
        color: #797979;
      }
    }
  }

  .topThr {
    width: 23.44rem;
    height: 0.63rem;
    background-color: #f2f2f2;
    opacity: 0.5;
  }

  .top_for {
    padding: 1.13rem 0;
    background: #fff;
    display: flex;
    align-items: flex-start;
    height: 40vh;

    .top_for_lis {
      background-color: #fff;
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .txt {
        font-size: 0.75rem;
        margin-top: 0.25rem;
      }

      .iconfont {
        font-size: 2rem;
      }

      .icon-fontclass-huiyuantongbu {
        color: #fd6356;
      }

      .icon-fontclass-wenzhang {
        color: #12da9f;
      }

      .icon-fontclass-wenzhangzhongxin {
        color: #ff9721;
      }
    }
  }
}

.maxShopListBox {
  min-height: 50vh;
  max-height: 70vh;
  overflow-y: scroll;
}

.shopShowTxt {
  width: 100%;
  text-align: center;
  font-size: 1.06rem;
  color: #202020;
  padding-top: 0.97rem;
}

.btnlis_li {
  margin: 0 0.94rem;
  margin-bottom: 0.97rem;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.94rem;
  border-bottom: 1.0016px solid #e8e8e8;

  .contenlis_lis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;

    .contenlis_lisline {
      width: 50%;
      margin-bottom: 0.78rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 0.69rem;
      color: #393939;

      .contenlis_lisline_Price {
        flex: 0.8;
        text-align: left;
        color: #f14e4e;
        font-size: 0.69rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .contenlis_top {
    display: flex;
    justify-content: space-between;

    .contenlis_topLeft {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .shopBtn {
        width: 4.06rem;
        height: 1.56rem;
        background-color: #f15353;
        font-size: 0.63rem;
        color: #fff;
        border-radius: 0.72rem;
        text-align: center;
        line-height: 1.44rem;
      }

      .user {
        flex: 1;
        margin-left: 0.53rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        overflow: hidden;

        .nameTxt {
          color: #2f2f2f;
          font-size: 0.88rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          text-align: left;
        }

        .time {
          font-size: 0.63rem;
          color: #7e7e7e;
        }
      }

      .img {
        width: 2.53rem;
        height: 2.5rem;
        background-color: #b6b6b6;
        border-radius: 1.25rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 1.25rem;
        }
      }
    }
  }
}

.btnlis {
  display: flex;
  margin: 0 0.94rem;
  margin-bottom: 0.97rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.56rem;
  padding-bottom: 0.94rem;
  border-bottom: 1.0016px solid #e8e8e8;

  .right {
    width: 4.06rem;
    height: 1.56rem;
    background-color: #f15353;
    border-radius: 0.78rem;
    font-size: 0.75rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .left {
    display: flex;
    align-items: center;

    .image {
      border-radius: 100%;
      width: 1.97rem;
      height: 1.97rem;
      background-color: #9f9f9f;
    }

    .leftTxt {
      font-size: 0.94rem;
      color: #202020;
      margin-left: 0.47rem;
    }
  }
}

#debtorShop {
  min-height: 100vh;

  .topHead {
    width: 100%;
    height: 10.31rem;
    background-image: url("../../../assets/images/debt/debtb1.png");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .navBox {
      display: flex;
      align-items: center;
      margin-bottom: 0.81rem;
      margin-left: 0.63rem;

      .navSelect {
        font-size: 0.75rem;
        color: #fff;
        display: flex;
        align-items: center;

        .line {
          position: absolute;
          bottom: -0.38rem;
          width: 2.19rem;
          height: 0.19rem;
          background-color: #fff;
          border-radius: 0.09rem;
          transition: 1s;
        }

        .home {
          font-size: 1.06rem;
          color: #fff;
          position: relative;
          transition: 0.5s;
        }

        .classViewM {
          margin: 0 1rem;
        }

        .classView {
          font-size: 0.75rem;
          transition: 0.5s;
          color: #fff;
          position: relative;
        }
      }

      .navSearch {
        margin-right: 1.13rem;
        padding: 0 0.63rem;
        width: 6.25rem;
        height: 1.88rem;
        background-color: #fff;
        border-radius: 0.94rem;
        display: flex;
        align-items: center;
        font-size: 0.88rem;
        color: #666;

        .iconfont {
          margin-right: 0.41rem;
        }
      }
    }

    .userbox {
      margin-top: 1.41rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 1.05rem;
      margin-right: 0.94rem;

      .img {
        width: 3.56rem;
        height: 3.56rem;
        background-color: #fff;
        border-radius: 100%;
        margin-right: 0.66rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }

      .userboxRight {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .userboxRight_right {
          width: 4.69rem;
          height: 1.88rem;
          background-image:
            linear-gradient(#ffec46, #ffec46),
            linear-gradient(#000, #000);
          background-blend-mode: normal, normal;
          border-radius: 0.94rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .userboxRight_left {
          color: #fff;
          text-align: left;

          .user {
            font-size: 1.06rem;
            margin-bottom: 0.5rem;
          }

          .shopGoodsD {
            font-size: 0.69rem;
            color: #fff;
            opacity: 0.7;
          }
        }
      }
    }
  }

  .navTab {
    width: 100%;
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    background: #fff;

    .my-swipe {
      width: 100%;
    }

    .navTabView_box {
      display: flex;
      flex-wrap: wrap;
    }

    .navTabView {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-bottom: 1.22rem;

      .img {
        width: 2.19rem;
        height: 2.19rem;
        border-radius: 100%;
        margin-bottom: 0.66rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }

      .txt {
        font-size: 0.75rem;
        color: #636262;
      }
    }
  }
}
</style>
